import React from "react";
import { View, Image } from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useTheme } from "@/contexts/ThemeContext";
import { createStyles } from "../styles";
import { GroupNotificationItem } from "../types";

interface NotificationIconProps {
  item: GroupNotificationItem;
}

const NotificationIcon: React.FC<NotificationIconProps> = ({ item }) => {
  const { colors } = useTheme();
  const styles = createStyles();

  switch (item.type) {
    case "dissolution":
      return (
        <View style={[styles.iconContainer, { backgroundColor: "#F44336" }]}>
          <MaterialCommunityIcons name="delete-circle" size={24} color="#fff" />
        </View>
      );
    case "invitation":
      return (
        <View style={[styles.iconContainer, { backgroundColor: "#4CAF50" }]}>
          <Ionicons name="mail" size={24} color="#fff" />
        </View>
      );
    case "join_request":
      return (
        <View style={[styles.iconContainer, { backgroundColor: "#FF9800" }]}>
          <Ionicons name="person-add" size={24} color="#fff" />
        </View>
      );
    case "role_promoted":
      return (
        <View
          style={[styles.iconContainer, { backgroundColor: colors.primary }]}
        >
          <Ionicons name="arrow-up-circle" size={24} color="#fff" />
        </View>
      );
    case "role_demoted":
      return (
        <View style={[styles.iconContainer, { backgroundColor: "#2196F3" }]}>
          <Ionicons name="arrow-down-circle" size={24} color="#fff" />
        </View>
      );
    default:
      return (
        <Image source={{ uri: item.groupAvatar }} style={styles.groupAvatar} />
      );
  }
};

export default NotificationIcon;
